"use client"

import { Menu, X, ArrowRight } from "lucide-react"
import { useState } from "react"

export function AIPosterWebsite() {
  const [isMenuOpen, setIsMenuOpen] = useState(false)

  return (
    <div className="h-full w-full overflow-auto bg-white">
      {/* Navigation */}
      <header className="sticky top-0 bg-white border-b z-10 px-4 py-3">
        <div className="flex items-center justify-between">
          <div className="flex items-center">
            <span className="ml-2 font-semibold text-xl">量化帮</span>
          </div>

          {/* Mobile menu button */}
          <button className="md:hidden" onClick={() => setIsMenuOpen(!isMenuOpen)}>
            {isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
          </button>

          {/* Desktop navigation */}
          <nav className="hidden md:flex items-center space-x-4 text-sm">
            <span className="cursor-pointer">核心技术</span>
            <span className="cursor-pointer">行业应用</span>
            <span className="cursor-pointer">案例展示</span>
            <span className="cursor-pointer">联系我们</span>
          </nav>
        </div>

        {/* Mobile menu */}
        {isMenuOpen && (
          <nav className="md:hidden pt-4 pb-2">
            <div className="flex flex-col space-y-3">
              <span className="cursor-pointer">核心技术</span>
              <span className="cursor-pointer">行业应用</span>
              <span className="cursor-pointer">案例展示</span>
              <span className="cursor-pointer">联系我们</span>
            </div>
          </nav>
        )}
      </header>

      {/* Hero Section */}
      <section className="px-4 py-8 md:py-12 border-b">
        <div className="max-w-4xl mx-auto text-center">
          <h1 className="text-2xl md:text-5xl font-bold mb-4">AI海报生成工具正在改变数字营销的游戏规则</h1>
          <p className="text-gray-600 mb-6 text-lg">这些工具能自动创建专业级视觉内容，将设计时间从小时缩短到分钟。</p>
          <button className="bg-black text-white px-6 py-2 rounded-full font-medium">立即体验</button>
        </div>
      </section>

      {/* Main Content */}
      <section className="px-4 py-8 md:py-16 relative overflow-hidden">
        <div className="max-w-4xl mx-auto">
          <h2 className="text-2xl md:text-4xl font-bold mb-6">AI海报生成7大核心技术解析</h2>
          
          <div className="space-y-8">
            <div className="bg-white p-6 rounded-lg shadow-sm">
              <h3 className="font-bold text-xl mb-3">1. GAN网络视觉生成</h3>
              <ul className="list-disc pl-6 space-y-2 text-gray-600">
                <li>将草图转为效果图</li>
                <li>支持实时风格迁移和材质替换</li>
              </ul>
            </div>

            <div className="bg-white p-6 rounded-lg shadow-sm">
              <h3 className="font-bold text-xl mb-3">2. 自然语言处理</h3>
              <ul className="list-disc pl-6 space-y-2 text-gray-600">
                <li>优化设计指令</li>
                <li>自动生成符合品牌语调的文案</li>
              </ul>
            </div>

            <div className="bg-white p-6 rounded-lg shadow-sm">
              <h3 className="font-bold text-xl mb-3">3. 自适应网格系统</h3>
              <ul className="list-disc pl-6 space-y-2 text-gray-600">
                <li>保持不同尺寸下的设计一致性</li>
              </ul>
            </div>

            <div className="bg-white p-6 rounded-lg shadow-sm">
              <h3 className="font-bold text-xl mb-3">4. 智能配色引擎</h3>
              <p className="text-gray-600 mb-2">分析千万成功案例</p>
              <ul className="list-disc pl-6 space-y-2 text-gray-600">
                <li>预测最高转化率的颜色组合</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Industry Applications */}
      <section className="px-4 py-8 md:py-16 bg-gray-50">
        <div className="max-w-4xl mx-auto">
          <h2 className="text-2xl md:text-4xl font-bold mb-8">行业应用实战案例</h2>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="bg-white p-6 rounded-lg shadow-sm">
              <h3 className="font-bold text-lg mb-2">电商</h3>
              <p className="text-gray-600">商家生成500种产品海报变体</p>
            </div>

            <div className="bg-white p-6 rounded-lg shadow-sm">
              <h3 className="font-bold text-lg mb-2">房地产</h3>
              <p className="text-gray-600 mb-2">3D神经渲染技术</p>
              <ul className="list-disc pl-6 space-y-1 text-gray-600">
                <li>将2D户型图转为沉浸式漫游海报</li>
                <li>点击率提升170%</li>
              </ul>
            </div>

            <div className="bg-white p-6 rounded-lg shadow-sm">
              <h3 className="font-bold text-lg mb-2">教育</h3>
              <p className="text-gray-600 mb-2">个性化课程推荐系统</p>
              <ul className="list-disc pl-6 space-y-1 text-gray-600">
                <li>根据学员历史数据生成定制化视觉</li>
                <li>包含进度条和成就徽章</li>
              </ul>
            </div>

            <div className="bg-white p-6 rounded-lg shadow-sm">
              <h3 className="font-bold text-lg mb-2">餐饮行业</h3>
              <p className="text-gray-600 mb-2">AI菜单海报能：</p>
              <ol className="list-decimal pl-6 space-y-1 text-gray-600">
                <li>自动识别菜品成分</li>
                <li>标注过敏原信息</li>
                <li>计算卡路里并视觉化展示</li>
                <li>根据时段显示早餐/午餐版式</li>
              </ol>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="px-4 py-6 md:py-8 bg-black text-white">
        <div className="max-w-4xl mx-auto">
          <div className="flex justify-between items-center">
            <div>
              <span className="text-xl font-semibold">量化帮</span>
            </div>
            <div className="text-sm">© {new Date().getFullYear()} 量化帮</div>
          </div>
        </div>
      </footer>
    </div>
  )
}
